<!DOCTYPE html>
<html>

<head>
  {include file="common/meta" /}
</head>

<body class="form-wrap">
  <div class="layui-fluid">
    <div class="layui-card">
      <blockquote class="layui-elem-quote">
        <button class="layui-btn layui-btn-danger" onclick="back()">
          返回
        </button>
      </blockquote>
      <div class="layui-card-header">编辑商品列表分类</div>
      <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" method="post" enctype="multipart/form-data">

          <!-- 分类的标题 -->
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px;">分类的标题</label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <input type="text" name="name" placeholder="请输入分类的标题" required class="layui-input" value="" />
              <span id="name_txt"></span>
            </div>
          </div>

          <!-- 配置的权重 -->
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px;">配置的权重</label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <input type="number" name="weigh" placeholder="请输入配置的权重" required class="layui-input" value="" />
            </div>
          </div>

          <!-- 封面 -->
          <div class="layui-form-item">
            <div class="avatar-add">
              <button type="button" class="layui-btn upload-img" onclick="cover.click()">
                <i class="layui-icon">&#xe67c;</i>上传封面
              </button>
              <input type="file" id="cover" name="cover" hidden>
              <img style="border-radius: 0px;left: 26%;top: 50%;width: 100px;height: 100px;" id="coverimg" src="">
              <span class="loading"></span>
            </div>
          </div>

          <!-- 提交 -->
          <div class="layui-form-item">
            <div class="layui-input-block">
              <div class="layui-footer" style="left: 0;">
                <button class="layui-btn" id="catebtn">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </div>


        </form>
      </div>
    </div>
  </div>
</body>

<script>
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    console.log(url);
    return url;
  }

  function back() {
    window.location.href = "{:url('admin/protype/index')}"
  }

  layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery

    // 封面预览图
    $("#cover").on("change", function () {

      // 获取当前文件路径
      var url = getObjectURL(this.files[0]);
      console.log(url);
      // 将路径放入img标签, 展示预览图
      if (url) {
        $("#coverimg").attr('src', url);
      }
    })

    // 判断类别名是否重复
    $("input[name='name']").on("change", function () {
      var newname = $(this).val();

      $.ajax({
        type: "POST",
        url: `{:url('admin/protype/check')}`,
        data: {
          name: newname,
        },
        success: function (data) {
          data = JSON.parse(data);
          if (data["result"]) {
            $("#name_txt").html(data["msg"]).css({
              color: "green",
            })
            $("#catebtn").attr("disabled", false);
          } else {
            $("#name_txt").html(data["msg"]).css({
              color: "red",
            });
            $("#catebtn").attr("disabled", true);
          }
        }
      })
    })

    // 
  })


</script>

</html>